---
breakpoint: tablet
title: usePage
---

# usePage

## Import

```js
import { usePage } from 'bumbag';
```

## Usage

The `usePage` hook will give you meta data about the page, as well as [sidebar](/page-shells/page-with-sidebar) & [header](/page-shells/page-with-header) utilities.

```function-live
function Example() {
  const page = usePage();
  return (
    <Stack spacing="major-1">
      <Box>Is page collapsed? {page.isCollapsed ? 'Yes' : 'No'}</Box>
      <Box>Is sidebar open? {page.sidebar.isOpen ? 'Yes' : 'No'}</Box>
      <Box>Is header open? {page.header.isOpen ? 'Yes' : 'No'}</Box>
      <Button onClick={page.sidebar.toggle}>Toggle sidebar</Button>
      <Button onClick={page.header.toggle}>Toggle header</Button>
    </Stack>
  );
}
```

## Schema

```js
const {
  isCollapsed,
  sidebar: {
    isOpen,
    isMinimized,
    open,
    close,
    toggle,
    minimize,
    maximize,
    toggleMinimize
  },
  header: {
    isOpen,
    open,
    close,
    toggle
  }
} = usePage()
```

### Return values

**<Code marginRight="major-1">isCollapsed</Code>** `boolean`

Returns truthy if the page has collapsed to the collapse breakpoint (mobile view).

**<Code marginRight="major-1">sidebar.isOpen</Code>** `boolean`

Returns truthy if the sidebar is open.

**<Code marginRight="major-1">sidebar.isMinimized</Code>** `boolean`

Returns truthy if the sidebar is minimized.

**<Code marginRight="major-1">sidebar.open</Code>** `function`

Opens the sidebar

**<Code marginRight="major-1">sidebar.close</Code>** `function`

Closes the sidebar

**<Code marginRight="major-1">sidebar.toggle</Code>** `function`

Toggles the sidebar

**<Code marginRight="major-1">sidebar.minimize</Code>** `function`

Minimizes the sidebar

**<Code marginRight="major-1">sidebar.maximize</Code>** `function`

Maximizes the sidebar

**<Code marginRight="major-1">sidebar.toggleMinimize</Code>** `function`

Toggles if the sidebar is minimized or maximized

**<Code marginRight="major-1">header.isOpen</Code>** `boolean`

Returns truthy if the header is open.

**<Code marginRight="major-1">header.open</Code>** `function`

Opens the header

**<Code marginRight="major-1">header.close</Code>** `function`

Closes the header

**<Code marginRight="major-1">header.toggle</Code>** `function`

Toggles the header
